<template>
    <div class="draggable" style="padding: 20px">
       <div class="Grid">
	   <div class="Row">
  <div class="Grid-cell" ><el-input  placeholder="请输入内容"></el-input></div>
  <div class="Grid-cell" >  <el-radio label="1">备选项</el-radio></div>
  <div class="Grid-cell" > <el-checkbox >备选项</el-checkbox></div>
  <i class="el-icon-circle-close"  @click.stop="deleteItem(index)"></i>
      </div>
	  <div class="Row">
  <div class="Grid-cell" ><el-input-number   :min="1" :max="10" label="描述文字"></el-input-number></div>
  <div class="Grid-cell" > <el-select  v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select></div>
  <div class="Grid-cell" ><el-switch
  active-color="#13ce66"
  inactive-color="#ff4949">
</el-switch></div>
      </div>
  </div>
    </div>
</template>
<script>
    import Sortable from 'sortablejs';
    export default {
        mounted() {
            this.divDrop();
        },
        data() {
            return {
			rowList:[],
			rowSortable:'',
			value:'',
			 options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
            }
        },
        methods: {
		    // div拖拽
            divDrop() {
                const wrapperTr = document.querySelectorAll('.Grid .Row');
				var i;
                for (i = 0; i < wrapperTr.length; i++) {
                this.sortable = Sortable.create(wrapperTr[i], {
				    draggable: ".Grid-cell",
                    delay: 0,
					group: { name: ""+i, pull: true, put: true },
                    onEnd: evt => {   
					   //if(evt.from.firstChild.outerHTML){
					   //console.log('from:'+evt.from.firstChild.outerHTML);
					   //}
					   //if(evt.to.firstChild.outerHTML){
                       //console.log('to:'+evt.to.firstChild.outerHTML);
					   //}
					   console.log(evt);
					   console.log(evt.srcElement);
					          //获取拖动后的排序
					   //var arr = sortable.toArray();
						//console.log(JSON.stringify(arr));
                    }
                });
				}
            }
        }
    }
</script>
<style scoped>
.Grid{
 width:100%
}
.Row {
  display: flex;
  border:1px dashed #000;
  height:50px;
}
.Grid-cell {
  flex: 1;
}
</style>